<template>
  <div>
    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    <van-cell-group>
      <!-- 整体的列表 -->
      <van-cell to="storePage" :border="false" class="cell-border" v-for="(item,i) in 10" :key="i">
        <template slot="title">
          <!-- 列表布局 -->
          <div class="store-layout">
            <!-- 左边图片 -->
            <img
              src="http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/96041/18/9099/237774/5e0b7695E7888ad20/18fabcc0b8f47dd4.jpg"
              alt
            />
            <!-- 中间内容 -->
            <van-cell :border="false" class="store-cell">
              <template slot="title">
                <div class="cell-title">
                  <span>Grodear女士服装店</span>
                  <van-tag color="#46a8ff">男</van-tag>
                  <van-tag color="#ff4674">女</van-tag>
                </div>
              </template>
              <template slot="label">
                <div>
                  <van-icon name="location" color="#ff4c24" />
                  <van-tag color="#feefe9" text-color="#f39476">锦泰服装城一楼106房</van-tag>
                  <p
                    class="center-text"
                  >有些店铺却人烟稀少，这里面的原因除了店铺装修风格、产品、价格以外，店铺的经营管理也是一个非常重要的因素。下面郭远ce2556就来跟您聊一聊服装店的经营技巧。</p>
                  <van-tag color="#c30c22ff" plain>自定义标签</van-tag>
                </div>
              </template>
            </van-cell>
            <!-- 右边图标 -->
            <van-icon name="star" color="#d8d8d8" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "storeList",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.cell-border {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px;
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.store-layout {
  display: flex;
  align-items: center;
  img {
    width: 90px;
    height: 70px;
  }
  .store-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .cell-title {
    font-size: 16px;
    font-weight: 700;
    span {
      margin-right: 5px;
    }
  }
}
.center-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
</style>